<!--
 * @Author: zww 表格组件——该组件设计的思想模仿elemnet-ui
 * @Date: 2021-08-05 14:41:07
 * @LastEditTime: 2021-08-05 16:58:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\表格组件.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <title>Document</title>
</head>
<style>
    table {
        border-collapse: collapse;
        margin: auto;
    }

    th,
    td {
        border: 1px solid #ff0080;
        padding: 2px 20px;
        text-align: center;
    }

    th {
        background-color: #ff0080;
        color: #fff;
    }

    [v-cloak] {
        display: none;
    }
</style>

<body>
    <!-- 何时使用插槽：插入的内容包含图片标签等需要渲染的元素时 -->
    <div id="app" v-cloak>
        <b-table :plist="peoplelist" :titlelist="titleList" :goodslist="goodslist">
            <b-table-item_top slot="itemtop" title="姓名" filed="name"></b-table-item_top>
            <b-table-item_top slot="itemtop" title="性别" filed="age"></b-table-item_top>
            <b-table-item_top slot="itemtop" title="爱好" filed="hobby"></b-table-item_top>
            <!-- 要在一个组件中不同地方添加不同的插槽插入 不同的内容 可以指定slot的name 然后插入到特定的地方 -->
            <b-table-item_mid slot="itemmid" title="产品名" filed="name"></b-table-item_mid>
            <b-table-item_mid slot="itemmid" title="价格" filed="price"></b-table-item_mid>
            <b-table-item_mid slot="itemmid" title="产地" filed="address"></b-table-item_mid>
            <b-table-item_mid slot="itemmid" title="颜色" filed="color"></b-table-item_mid>
        </b-table>
    </div>

    <script>
        Vue.component("b-table-item_top", {
            //  第一种方法：使用插槽
            // 第二种方法: 传入属性
            props: ["title", "filed"],
            template: `
            <th>{{title}}</th>
         `,
            mounted() {
                this.$parent.peoplefiled.push(this.filed);
            },
        });
        Vue.component("b-table-item_mid", {
            //  第一种方法：使用插槽
            // 第二种方法: 传入属性
            props: ["title","filed"],
            template: `
            <th>{{title}}</th>
         `,
         mounted(){
                this.$parent.goodfiled.push(this.filed)
            },
        });

        // 表格组件
        Vue.component("b-table", {
            props: {
                plist: {
                    type: Array,
                    required: true,
                },
                //  这里的参数可以大写，在传参的时候不能有大写 写成xx-xxx的小写形式
                titlelist: {
                    type: Array,
                    required: true,
                },
                goodslist: {
                    type: Array,
                },
            },

            template: `
        <div>
            <table>
                <tr>
                    <slot name='itemtop'></slot>
                </tr>
                <tr v-for="(item,index) in plist">
                    <td v-for="col in peoplefiled">{{ item[col] }}</td>
                </tr>
                <tr>
                    <slot name='itemmid'></slot>
                </tr>
                <tr v-for="(item) in goodslist">
                    <td v-for="col in goodfiled">{{ item[col] }}</td>
                </tr>
            </table>
        </div>
            `,
            data() {
                return {
                    peoplefiled: [],
                    goodfiled:[]
                };
            },
            mounted() {
                console.log(this.peoplefiled);
            },
        });
        new Vue({
            el: "#app",
            data() {
                return {
                    titleList: ["姓名", "性别", "年龄", "爱好"],
                    peoplelist: [{
                            name: "小文",
                            age: 26,
                            hobby: "happy",
                        },
                        {
                            name: "陆婷",
                            age: 26,
                            hobby: "sing",
                        },
                        {
                            name: "陆迪",
                            age: 26,
                            hobby: "dance",
                        },
                    ],
                    goodslist: [{
                            name: "小米",
                            price: "2000￥",
                            address: "CHINA",
                            color: "red",
                        },
                        {
                            name: "松下",
                            price: "200￥",
                            address: "JAPAN",
                            color: "blue",
                        },
                        {
                            name: "苹果",
                            price: "3000$",
                            address: "USA",
                            color: "yellow",
                        },
                    ],
                };
            },
        });
    </script>
</body>

</html>